<template>
    <div class="app-container editcss">
      <el-row :gutter="0" class="el-card is-always-shadow el-card__body card_contents" style="padding: 0px;">
        <el-col class="title_tops">
          <div class="title_tops_t">
            <div class="title_top_E">New Hospital</div>
            <div class="title_top_C">{{ id == 0 ? '新建' : '编辑' }}部门</div>
          </div>
          <div class="title_tops_b" @click="tabGo">
            <img src="../../assets/iconfont/arrow-left-circle.png" alt="" srcset="">
            <span>返回部门管理</span>
          </div>
        </el-col>
        <el-col class="dialog_title_ch_conter_operate card_contents_tex">
          <div class="editHeld_conter_left">
            <el-upload class="avatar-uploader" :class="untenFun(addFrom.avatarUrl)?'border':''" :show-file-list="false" action="/app/img/up" :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <div v-if="addFrom.avatarUrl" class="avatar">
                <img :src="addFrom.avatarUrl">
                <div>点击更换</div>
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon" :style="untenFun(addFrom.avatarUrl)?'color: #FE294D;':''"></i>
              <div slot="tip" class="el-upload__tip">建议尺寸：800*800px</div>
            </el-upload>
            <div class="unten" v-if="untenFun(addFrom.avatarUrl)">请上传图片</div>
          </div>
          <div class="editHeld_conter_right">
            <div class="xiugai">
              <div>
                <screenSelect title="部门名称：" type='input' v-model="addFrom.departmentName" :isValue='addFrom.departmentName'
                  placeholder="请输入" @transfer="valueHeld($event, 'departmentName')" width='286px' position="top" :isBorder="untenFun(addFrom.departmentName)"/>
                  <div class="unten" v-if="untenFun(addFrom.departmentName)">请输入部门名称</div>
              </div>
            </div>
            <div class="xiugai">
              <div>
                <screenSelect title="部门负责人：" type='input' v-model="addFrom.contacts" :isValue='addFrom.contacts'
                  placeholder="请输入" @transfer="valueHeld($event, 'contacts')" width='199px' position="top" :isBorder="untenFun(addFrom.contacts)"/>
                  <div class="unten" v-if="untenFun(addFrom.contacts)">请输入部门负责人</div>
              </div>
              <div>
                <screenSelect title="联系电话：" type='input' v-model="addFrom.phone" :isValue='addFrom.phone'
                  placeholder="请输入" @transfer="valueHeld($event, 'phone')" width='199px' position="top" :isBorder="untenFun(addFrom.phone)"/>
                  <div class="unten" v-if="untenFun(addFrom.phone)">请输入联系电话</div>
              </div>
                <div>
                  <screenSelect title="部门状态：" type='select' v-model="addFrom.status" :isValue='addFrom.status' placeholder="请选择"
                  @transfer="valueHeld($event, 'status')" :options="statusoptions" position="top" width='225px' :isBorder="untenFun(addFrom.status)"/>
                  <div class="unten" v-if="untenFun(addFrom.status)">请选择部门状态</div>
                </div>
            </div>
          </div>
        </el-col>
        <el-col class="card_contents_footer">
          <el-button type="primary" class="ch_button_seav" @click="submitd">
            <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
            <div>提交</div>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </template>

  <script>
  import construction from '@/components/construction/index.vue'
  import screenSelect from '@/components/screenSelect/index.vue'
  import smallCard from '@/components/smallCard/index.vue'
  import {getDepartAdd,getDepartUpdate,getDepartDetail} from '@/api/department'
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: "Field",
    components: {
      construction,
      screenSelect,
      smallCard
    },
    computed: {
      ...mapGetters([
        'permissionList'
      ]),
    },
    data() {
      return {
        cardData: [],
        statusoptions: [
        {
          value: 0,
          label: '运营中'
        }, {
          value: 1,
          label: '停运'
        }
      ],
        imageUrl: '',
        id: 0,
        addFrom: {avatarUrl:''},
        isUnten: false
      };
    },
    mounted() {
      this.id = this.$route.params.id
      if (this.id != 0) {
        getDepartDetail(this.$route.params.id).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.addFrom = res.data.department
          }
        })
      }
    },

    methods: {
      untenFun(data) {
        if (this.isUnten) {
          if (data == undefined) {
            return true
          } else {
            if (data == '' && data != '0') {
              return true
            } else {
              return false
            }
          }

        } else {
          return false
        }

      },
      tabGo() {
        this.$router.go(-1)
      },
      submitd() {
        let that = this
        that.isUnten = true
        for (let key in that.addFrom) {
          if (key != 'avatarUrl') {
            if (that.addFrom[key] === '' || that.addFrom[key] === undefined) {
                console.log(key);
                return false
              }
          }
        }
        if (that.id == 0) {
            getDepartAdd(that.addFrom).then(res => {
            if (res.code == 200) {
              this.$Toast(res.message)
              this.tabGo()
            }
          })
          // 新建逻辑
        } else {
          // 编辑逻辑
          getDepartUpdate(that.addFrom).then(res => {
            if (res.code == 200) {
              this.$Toast(res.message)
              this.tabGo()
            }
          })
        }
      },
      search() {
        this.pageData={
					pageNo: 1,
					pageSize: 10
				}
        console.log(this.provinceName, '-----', this.institutionName);
      },
      reset() {
        this.provinceName = ''
        this.institutionName = ''
      },
      valueHeld(childParam, fatherparam) {
        this.addFrom[fatherparam] = childParam
      },
      multifunction(e, id) {
        // this.keshi = e
        // this.$router.push({path:'administrative'})
      },
      handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        if(res.code==200){
          this.addFrom.avatarUrl = res.data.imgUrl
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }

    }
  }
  </script>

  <style lang="scss" scoped>
  .editcss {
    width: 100%;

    .card_contents {
      height: calc(100% - 1px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .card_contents_tex {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 20px;
      }

      .card_contents_footer {
        padding: 16px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #EFEFEF;
      }
    }

    .content_h {
      height: 149px;
      border-radius: 5px;
      padding: 0px;
    }

    .title_top {
      height: 79px;
      border-bottom: 1px solid #EFEFEF;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 0 20px;
    }

    .title_tops {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 20px;
      height: 79px;
      border-bottom: 1px solid #EFEFEF;

      .title_tops_t {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .title_tops_b {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 28px;
        cursor: pointer;

        img {
          width: 24px;
          height: 24px;
          margin-right: 5px;
        }

        span {
          font-size: 16px;
          font-weight: 400;
          color: #000;
        }
      }
    }

    .screen_case_title {
      font-size: 16px;
      font-weight: 400;
      color: #000;
      margin-right: 35px;
    }

    .title_top_E {
      font-size: 12px;
      font-weight: 400;
      color: #9898989E;
    }

    .title_top_C {
      font-size: 18px;
      font-weight: 400;
      color: #000;
    }

    ::v-deep .ch_button_seav {
      padding: 7px 27px;

      span {
        display: flex;
        align-items: center;
        justify-content: center;

        div {
          font-size: 16px;
          font-weight: 400;
          margin-left: 10px;
        }
      }
    }

    .ch_button_img_seav {
      width: 24px;
      height: 24px;
    }

    .ch_button_img {
      width: 16px;
      height: 16px;
    }

    .dialog_title_ch_conter_operate {
      padding: 24px 35px;
      // border: 1px solid #EBEBEB;
      border-radius: 2px;
      display: flex;
      // align-items: center;
    }


    /*
    编辑
    */
    .editHeld_conter_left {
      margin-right: 70px;
      white-space: nowrap;
      text-align: center;
    }

    .editHeld_conter_right {
      flex: 1;

      .el-row {
        margin-bottom: 45px;
        display: flex;
        align-items: flex-end;
      }
    }

    ::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
      border: 1px solid #d9d9d9;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
  ::v-deep .editHeld_conter_left .border .el-upload {
    border: 1px solid #FE294D;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
    // ::v-deep  .avatar-uploader .el-upload:hover {
    //   border-color: #409EFF;
    // }
    .editHeld_conter_left .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 160px;
      height: 160px;
      line-height: 160px;
      text-align: center;
    }

    .editHeld_conter_left .avatar {
      width: 160px;
      height: 160px;
      display: block;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000066;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFFAA;
      }
    }
  }
  </style>
